<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/WYSIWYG-css.css" type="text/css"/>
    <link rel="stylesheet" href="bootstrap-3/bootstrap-3.3.7-dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="Font-Awesome-3/Font-Awesome-3.2.1/css/font-awesome.css" type="text/css"/>
    <link rel="stylesheet" href="Font-Awesome-3/Font-Awesome-3.2.1/css/font-awesome.min.css" type="text/css"/>
    <title>所见即所得</title>
</head>
<body>


<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header1">

            <a class="navbar-brand" href="#">
                <i class="glyphicon glyphicon-heart"></i>
                <span class="hidden-phone hidden-xs">Flatty</span>
            </a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a class="glyphicon glyphicon-menu-hamburger" href="#">
                        <!--<i class="icon-reorder"></i>-->
                    </a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <button class="glyphicon glyphicon-search" name="button" type="submit"></button>
                            <input type="text" class="form-control" value="Search...">
                        </div>
                    </form>
                </li>
                <li class="item-bc">
                    <a class="glyphicon glyphicon-adjust dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#"></a>
                    <ul class="dropdown-menu">
                        <li class="item-color">Body color</li>
                        <li><a href="#">
                            Light
                            <small>(default)</small>
                        </a></li>
                        <li><a href="#">
                            Dark
                        </a></li>
                        <li><a href="#">
                            Dark blue
                        </a></li>
                        <li role="separator" class="divider"></li>
                        <li class="item-color">Contrast color</li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Red
                            <small>(default)</small>
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Blue
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Orange
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Purple
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Green
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Muted
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Facebook
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Dark
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Pink
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Grass green
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Sea blue
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Banana
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Dark orange
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Brown
                        </a></li>
                    </ul>

                </li>
                <li class="item-bc1"><a href="#"><i class="fa fa-feed"></i><span class="badge">5</span></a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="img/avatar.jpg">  Mila Kunis <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">
                            <i class="glyphicon glyphicon-user"></i>
                            Profile
                        </a></li>
                        <li><a href="#">
                            Settings
                        </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">
                            Sign out
                        </a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="content">
    <div class="content-left">
        <ul class="left-list">
            <li class="list-item">
                <a href="index.html">
                    <i class="icon-dashboard"></i>
                    <span class="list-item-font">Dashboard</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-edit"></i>
                    <span class="list-item-font">Forms</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Form styles and features</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Form components</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Validations.html">
                            <i class="icon-caret-right"></i>
                            <span>Validations</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Wizard.html">
                            <i class="icon-caret-right"></i>
                            <span>Wizard</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-tint"></i>
                    <span class="list-item-font">UI Elements & Widgets</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>UI Elements</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Widgets.html">
                            <i class="icon-caret-right"></i>
                            <span>Widgets</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="buttons-and-icon.html">
                    <i class="icon-star"></i>
                    <span class="list-item-font">Buttons & Icons</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-cogs"></i>
                    <span class="list-item-font">Components</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="chart.html">
                            <i class="icon-bar-chart"></i>
                            <span>Charts</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-envelope"></i>
                            <span>Address book</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Chats.html">
                            <i class="icon-comments"></i>
                            <span>Chats</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-pencil"></i>
                            <span>In-place editing</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-list-ul"></i>
                            <span>File trees</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Fileupload.html">
                            <i class="icon-file"></i>
                            <span>Fileupload</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Todo-list.html">
                            <i class="icon-list-alt"></i>
                            <span>Todo list</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="WYSIWYG.html">
                            <i class="icon-paste"></i>
                            <span>WYSIWYG</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="Tables.html">
                    <i class="icon-table"></i>
                    <span class="list-item-font">Tables</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-th"></i>
                    <span class="list-item-font">Grid</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-font"></i>
                    <span class="list-item-font">Typography</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-calendar"></i>
                    <span class="list-item-font">Calendar</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-book"></i>
                    <span class="list-item-font">Example pages</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-money"></i>
                            <span>Invoice</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-picture"></i>
                            <span>Gallery</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-time"></i>
                            <span>Timeline</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-table"></i>
                            <span>Pricing tables</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-user"></i>
                            <span>User profile</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-question-sign"></i>
                            <span>404 Error</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-cogs"></i>
                            <span>500 Error</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-signin"></i>
                            <span>Sign in</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-bullhorn"></i>
                            <span>FAQ</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-inbox"></i>
                            <span>Orders</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-search"></i>
                            <span>Search results</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-circle-blank"></i>
                            <span>Blank page</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-cog"></i>
                    <span class="list-item-font">Layouts</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Closed navigation</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed header</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed navigation</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed navigation & header</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-mail-reply"></i>
                    <span class="list-item-font">Email templates</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-folder-open-alt"></i>
                    <span class="list-item-font">Four level dropdown</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span class="list-item-font">Second level</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item"></li>
        </ul>
    </div>

    <div class="content-right">

        <div class="right-top">
            <h1>
                <i class="icon-paste"></i>
                <span class="list-item-font">WYSIWYG</span>
            </h1>
            <div class="btn-group" role="group" aria-label="...">
                <a href="index.html">
                    <i class="icon-bar-chart"></i>
                </a>
                <i class="icon-angle-right"></i>
                <span>Components</span>
                <i class="icon-angle-right"></i>
                <span>WYSIWYG</span>
            </div>
        </div>

        <div class="aside aside-hide1">
            <div class="aside-left-top blue-background">
                <div>
                    Advanced WYSIWYG (CKEditor)
                </div>
                <div>
                    <a class="remove1" href="#remove1"><i class="icon-remove"></i></a>
                    <a class="chevron1" href="#chevron1"><i class="icon-chevron-up"></i></a>
                </div>
            </div>
            <div class="text"></div>
        </div>

        <div class="aside aside-hide2">
            <div class="aside-left-top purple-background">
                <div>
                    Simple WYSIWYG (wysihtml5)
                </div>
                <div>
                    <a class="remove2" href="#remove2"><i class="icon-remove"></i></a>
                    <a class="chevron2" href="#chevron2"><i class="icon-chevron-up"></i></a>
                </div>
            </div>
            <div class="talk">
                <div class="box-content">
                    <ul class="wysihtml5-toolbar" style="">
                        <li class="dropdown">
                            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="icon-font"></i>&nbsp;
                                <span class="current-font">Normal text</span>&nbsp;
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="javascript:;">Normal text</a>
                                </li>
                                <li>
                                    <a href="javascript:;">Heading 1</a>
                                </li>
                                <li>
                                    <a href="javascript:;">Heading 2</a>
                                </li>
                                <li>
                                    <a href="javascript:;">Heading 3</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class="btn-group">
                                <a class="btn" href="javascript:;"><b>Bold</b></a>
                                <a class="btn" href="javascript:;"><i>Italic</i></a>
                                <a class="btn" title="CTRL+U" href="javascript:;" style="text-decoration: underline">Underline</a>
                            </div>
                        </li>
                        <li>
                            <div class="btn-group">
                                <a class="btn" title="Unordered list" href="javascript:;"><i class="icon-list"></i></a>
                                <a class="btn" title="Ordered list" href="javascript:;"><i class="icon-th-list"></i></a>
                                <a class="btn" title="Outdent" href="javascript:;"><i class="icon-indent-right"></i></a>
                                <a class="btn" title="Indent" href="javascript:;"><i class="icon-indent-left"></i></a>
                            </div>
                        </li>
                        <li>
                            <div class="bootstrap-wysihtml5-insert-link-modal modal hide fade">
                                <div class="modal-header"><a class="close" data-dismiss="modal">×</a><h3>Insert link</h3></div>
                                <div class="modal-body"><input value="http://" class="bootstrap-wysihtml5-insert-link-url input-xlarge"></div>
                                <div class="modal-footer"><a href="#" class="btn">Cancel</a><a href="#" class="btn btn-primary">Insert link</a></div>
                            </div>
                            <a class="btn" title="Insert link" href="javascript:;"><i class="icon-share"></i></a>
                        </li>
                        <li>
                            <div class="bootstrap-wysihtml5-insert-image-modal modal hide fade">
                                <div class="modal-header"><a class="close" data-dismiss="modal">×</a><h3>Insert image</h3></div>
                                <div class="modal-body"><input value="http://" class="bootstrap-wysihtml5-insert-image-url input-xlarge"></div>
                                <div class="modal-footer">
                                    <a href="#" class="btn">Cancel</a><a href="#" class="btn btn-primary">Insert image</a>
                                </div>
                            </div>
                            <a class="btn" title="Insert image" href="javascript:;"><i class="icon-picture"></i></a>
                        </li>
                    </ul>
                    <div id="body_">
                        <h1>In computing,</h1>

                        a WYSIWYG editor is a system in which content (text and graphics) displayed onscreen during editing appears in a form closely corresponding to its appearance when printed or displayed as a finished product,[1] which might be a printed document, web page, or slide presentation. WYSIWYG (pron.: /ˈwɪziwɪɡ/ wiz-ee-wig)[2] is an acronym for "what you see is what you get".
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>


<script type="text/javascript" src="jq/jquery.min.js"></script>
<script src="bootstrap-3/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script>
    $(function () {
        $('.list-item').on('click',function () {
            $(this).children('ul').toggle();
            $(this).css('background','#fff');
        });
        $('.item').on('mouseover',function () {
            $(this).find('.icon-pencil').css('display','block');
            $(this).find('.icon-remove').css('display','block');
        }).on('mouseout',function () {
            $(this).find('.icon-pencil').css('display','none');
            $(this).find('.icon-remove').css('display','none');
        });
        $('.remove1').on('click',function () {
            $('.aside-hide1').hide();
        });
        $('.remove2').on('click',function () {
            $('.aside-hide2').hide();
        });
        $('.chevron1>.icon-chevron-up').on('click',function () {
            $('.text').toggle();
            $(this).toggleClass('icon-chevron-down');
        });
        $('.chevron2>.icon-chevron-up').on('click',function () {
            $('.talk').toggle();
            $(this).toggleClass('icon-chevron-down');
        });
    });
</script>

</body>
</html>